<template>
  <view>
    <view class="choose-adress" @click="change" v-if="isShow">
      <view class="text">请选择收货地址</view>
      <uni-icons type="right" size="18"></uni-icons>
    </view>
    <view class="address-info" v-else>
      <view class="address-user">
        <view class="row1">
          <view class="row1-left">收货人：{{address.username}}</view>
          <view class="row1-right">手机号：{{address.tel}}</view>
        </view>
        <view class="row2">
          <view class="address-detail">收货地址：{{address.address}}</view>
          <uni-icons type="closeempty" size="14" @click="change"></uni-icons>
        </view>
      </view>
      <!-- 底部边框图片 -->
      <image src="../../static/cart_bottom.png" class="address-img"></image>
    </view>
    
  </view>
</template>

<script>
  export default {
    name:"myAddress",
    data() {
      return {
        isShow:true,
        address:{
          username:"冷兔",
          tel:"13009384393",
          address:"河南省安阳市文峰区弦歌大道1439号"
        }
      };
    },
    methods:{
      // 添加收货地址
      change(){
        this.isShow = !this.isShow 
      }
    }
  }
</script>

<style lang="scss">
  .choose-adress{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #42b983;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 5px;
    .text{
      font-size: 12px;
      line-height: 30px;
    }
    
  }
  
  .address-info{
    font-size: 12px;
    .address-user{
      display: flex;
      flex-direction: column;
      padding: 5px;
      .row1{
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        .row1-left{}
        .row1-right{}
      }
      .row2{
        display: flex;
        justify-content: space-between;
        .address-detail{}
      }
    }
    
    .address-img{
      width: 100%;
      height: 5px
    }
  }

</style>